<!--
 * @Descripttion: 
 * @Version: 1.0
 * @Author: wcl
 * @Date: 2023-11-23 15:06:25
 * @LastEditors: wcl
 * @LastEditTime: 2023-11-24 11:04:22
-->
<template>
    <div>
        <a-modal v-model:open="modalOpen" :title="title" width="50%" :footer="null"  @cancel="handleClose">
            <a-space direction="vertical" style="width: 100%" :size="16">
                <a-form :model="formData" ref="formRef" labelAlign="left" :label-col="{ span: 3 }" :wrapper-col="{ span: 16 }">
                    <a-form-item label="参数名称" name="title" :rules="[{ required: true, message: '请输入参数名称' }]">
                        <a-input v-model:value="formData.title" placeholder="输入参数名称" />
                    </a-form-item>
                    <a-form-item label="参数性质" name="quality" :rules="[{ required: true, message: '请输入参数性质' }]">
                        <a-radio-group v-model:value="formData.quality">
                            <a-radio :style="radioStyle" :value="1">单选项
                            </a-radio>
                            <a-radio :style="radioStyle" :value="2">多选项
                            </a-radio>
                        </a-radio-group>
                    </a-form-item>
                    <a-form-item label="提示内容" name="tip" :rules="[{ required: true, message: '请输入提示内容' }]">
                        <a-input v-model:value="formData.tip" placeholder="输入提示内容" />
                    </a-form-item>
                    <a-form-item label="参数内容" name="content" :rules="[{ required: true, message: '请输入参数内容' }]">
                        <a-textarea v-model:value="formData.content" placeholder="请输入参数内容，每个参数请用 / 隔开输入..."  :rows="6"/>
                    </a-form-item>
                    <a-form-item label="展示排序" name="sort" :rules="[{ required: true, message: '请输入展示排序' }]">
                        <a-input v-model:value="formData.sort" placeholder="输入排序数字编号"/>
                    </a-form-item>
                </a-form>
                <div class="modal-but-layout">
                    <a-space wrap>
                        <a-popconfirm title="您是否要数据重置?" ok-text="是" cancel-text="否" @confirm="confirm">
                            <a-button>重置</a-button>
                        </a-popconfirm>
                        <a-button type="primary" @click="handleSubmit">提交</a-button>
                    </a-space>
                </div>
            </a-space>
        </a-modal>
    </div>
</template>
<script setup>
import { ref,reactive, nextTick } from 'vue'
const radioStyle = reactive({
    height: '30px',
    lineHeight: '30px',
})
const props = defineProps(['titles','index','list'])
const modalOpen = ref(true)
const formRef = ref(null)
const formData = ref({})
const title = ref('')
const changeIndex = ref('')
console.log(props)
changeIndex.value = props.index;
formData.value = Object.assign({}, props.list);
title.value = props.titles

// const open = (titles,record,index) => {
//     title.value = titles
//     changeIndex.value = index
//     modalOpen.value = true
//     nextTick(() => {
//         formData.value = Object.assign({},record)
//         formRef.value.resetFields()
//     })
// }
const emits = defineEmits(['refresh','closeModal'])
const handleSubmit = async (res) => {
    formRef.value.validate().then((res) => {
        formData.value.types = '选择项'
        emits('refresh',formData.value, changeIndex.value)
        modalOpen.value = false
    })
}
const confirm = () => {
    formData.value = {}
}
function handleClose() {
  emits("closeModal");
}
defineExpose({ modalOpen, open })
</script>
<style lang="scss" scoped></style>
